<template>
  <div class="page_row">
    <div class="zx_titel">
      <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/applyRecord' }"
            >报馆记录</el-breadcrumb-item
          >
          <el-breadcrumb-item>审图资料</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="upload_list">
      <div class="drawingsUploadLayout">
        <div class="text_list">
          <div>
            审核状态:
            <dict-tag
              :options="dict.type.apply_status"
              :value="reportCadApply.applyStatus"
            />
          </div>
          <div>审核意见:{{ reportCadApply.comment }}</div>
          <div>审核时间:{{ reportCadApply.createTime }}</div>
          <div>
            <div>审核图片:</div>
              <el-image
                style="width: 200px; height: 200px"
                :src="reportCadApply.checkUrl"
                :fit="contain"
              ></el-image>
         
          </div>
        </div>
        <div>
          <div v-for="(item, index) in imglist" :key="index">
            <el-image
              style="width: 100px; height: 100px; margin-right: 10px"
              :src="item"
              fit="contain"
              :preview-src-list="imglist[index]"
            ></el-image>
          </div>
        </div>
      </div>
      <div class="fill_row">
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-position="top"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="施工单位资质证明">
            <div class="upload_text">
              要求：搭建单位提交营业执照扫描件、资质证书扫描件
            </div>
            <div v-for="(item, index) in attachmentType1" :key="index">
              <el-image
                style="width: 200px; height: 200px; margin-right: 10px"
                :src="item"
                fit="contain"
                :preview-src-list="attachmentType1[index]"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="特装展台搭建委托书">
            <div class="upload_text">
              要求：必须填写完整，搭建单位及参展单位签字盖章
            </div>
            <div v-for="(item, index) in attachmentType2" :key="index">
              <el-image
                style="width: 200px; height: 200px; margin-right: 10px"
                :src="item"
                fit="contain"
                :preview-src-list="attachmentType2[index]"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="特装搭建施工安全责任书">
            <div class="upload_text">
              要求：必须填写完整，搭建单位签字盖章。
            </div>
            <div v-for="(item, index) in attachmentType3" :key="index">
              <el-image
                style="width: 200px; height: 200px; margin-right: 10px"
                :src="item"
                fit="contain"
                :preview-src-list="attachmentType3[index]"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="音量控制承诺书">
            <div class="upload_text">
              要求：必须填写完整，由参展单位签字盖章
            </div>
            <div v-for="(item, index) in attachmentType4" :key="index">
              <el-image
                style="width: 200px; height: 200px; margin-right: 10px"
                :src="item"
                fit="contain"
                :preview-src-list="attachmentType4[index]"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="电工证">
            <div class="upload_text">
              要求：提交彩色正反面有效电工证件，搭建单位盖章
            </div>
            <div v-for="(item, index) in attachmentType5" :key="index">
              <el-image
                style="width: 200px; height: 200px; margin-right: 10px"
                :src="item"
                fit="contain"
                :preview-src-list="attachmentType5[index]"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="电动工具入馆申请">
            <div class="upload_text">要求：必须填写完整，搭建单位签字盖章</div>
            <div v-for="(item, index) in attachmentType6" :key="index">
              <el-image
                style="width: 200px; height: 200px; margin-right: 10px"
                :src="item"
                fit="contain"
                :preview-src-list="attachmentType6[index]"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="展台效果图">
            <div class="upload_text">
              要求：需提交彩色正面、侧面、俯视图并标注尺寸，搭建单位盖章
            </div>
            <div v-for="(item, index) in attachmentType7" :key="index">
              <el-image
                style="width: 200px; height: 200px; margin-right: 10px"
                :src="item"
                fit="contain"
                :preview-src-list="attachmentType7[index]"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="展台平面图">
            <div class="upload_text">
              要求：需标注配电箱安装位置及展台的区域分布，搭建单位盖章
            </div>
            <div v-for="(item, index) in attachmentType8" :key="index">
              <el-image
                style="width: 200px; height: 200px; margin-right: 10px"
                :src="item"
                fit="contain"
                :preview-src-list="attachmentType8[index]"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="展台施工图">
            <div class="upload_text">
              要求：需提交全套图纸并要求标注详细尺寸、选材、规格，搭建单位盖章
            </div>
            <div v-for="(item, index) in attachmentType9" :key="index">
              <el-image
                style="width: 200px; height: 200px; margin-right: 10px"
                :src="item"
                fit="contain"
                :preview-src-list="attachmentType9[index]"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="网格图">
            <div class="upload_text">
              要求：需提交正面、侧面网格图标明高度，搭建单位盖章
            </div>
            <div v-for="(item, index) in attachmentType10" :key="index">
              <el-image
                style="width: 200px; height: 200px; margin-right: 10px"
                :src="item"
                fit="contain"
                :preview-src-list="attachmentType10[index]"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="电路图">
            <div class="upload_text">
              要求：需标注电器回路、回路负载、所用材质的规格及型号，搭建单位盖章
            </div>
            <div v-for="(item, index) in attachmentType11" :key="index">
              <el-image
                style="width: 200px; height: 200px; margin-right: 10px"
                :src="item"
                fit="contain"
                :preview-src-list="attachmentType11[index]"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="吊点图">
            <div class="upload_text">
              要求：需提交效果图、平面图、材质说明图、吊点点位重量计算图
              （每个吊点重量不能超过100kg），搭建单位盖章
            </div>
            <div v-for="(item, index) in attachmentType13" :key="index">
              <el-image
                style="width: 200px; height: 200px; margin-right: 10px"
                :src="item"
                fit="contain"
                :preview-src-list="attachmentType13[index]"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="维保证">
            <div class="upload_text">
              要求：需提交正确的个人信息，搭建单位盖章
            </div>
            <div v-for="(item, index) in attachmentType14" :key="index">
              <el-image
                style="width: 200px; height: 200px; margin-right: 10px"
                :src="item"
                fit="contain"
                :preview-src-list="attachmentType14[index]"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="结构安全证明书">
            <div class="upload_text">
              要求：搭建二层展台的参展单位须提供建筑部门出具的展台结构安全证明书，搭建单位盖章
            </div>
            <div v-for="(item, index) in attachmentType12" :key="index">
              <el-image
                style="width: 200px; height: 200px; margin-right: 10px"
                :src="item"
                fit="contain"
                :preview-src-list="attachmentType12[index]"
              ></el-image>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { applydetils } from "@/api/outfit/drawingadd.js";
import { getToken, setToken } from "@/utils/auth";
import {
  apply,
  stand_info,
  getOrganizetionInfo,
  upalodapply,
} from "@/api/outfit/drawingadd.js";
export default {
  dicts: ["apply_status"],
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      dialoginput: false,

      attachmentType1: [],
      attachmentType2: [],
      attachmentType3: [],
      attachmentType4: [],
      attachmentType5: [],
      attachmentType6: [],
      attachmentType7: [],
      attachmentType8: [],
      attachmentType9: [],
      attachmentType10: [],
      attachmentType11: [],
      attachmentType12: [],
      attachmentType13: [],
      attachmentType14: [],
      ruleForm: {},
      applyif: 0,
      detailid: 0,
      reportCadApply: {},
      imglist: [],
    };
  },
  created() {
    this.detailid = this.$route.query.id;
    console.log(this.detailid);
    this.getdata();
  },
  activated() {
    this.detailid = this.$route.query.id;
    this.getdata();
  },
  methods: {
    getdata() {
      apply(this.detailid).then((res) => {
        this.reportCadApply = res.data.reportCadApply;
        if (this.reportCadApply.checkUrl != null) {
          this.imglist = this.reportCadApply.checkUrl.split(",");
        }
        this.getdetils();
        console.log(this.reportCadApply);
      });
    },
    // 查询附件详情
    getdetils() {
      applydetils(this.reportCadApply.id).then((res) => {
        if (res.rows) {
          let type1 = res.rows.filter((item) => item.attachmentType == 1);
          console.log(type1);
          this.attachmentType1 = type1[0].attachmentUrl.split(",");
          let type2 = res.rows.filter((item) => item.attachmentType == 2);
          this.attachmentType2 = type2[0].attachmentUrl.split(",");
          let type3 = res.rows.filter((item) => item.attachmentType == 3);
          this.attachmentType3 = type3[0].attachmentUrl.split(",");
          let type4 = res.rows.filter((item) => item.attachmentType == 4);
          this.attachmentType4 = type4[0].attachmentUrl.split(",");

          let type5 = res.rows.filter((item) => item.attachmentType == 5);
          this.attachmentType5 = type5[0].attachmentUrl.split(",");
          let type6 = res.rows.filter((item) => item.attachmentType == 6);
          this.attachmentType6 = type6[0].attachmentUrl.split(",");
          let type7 = res.rows.filter((item) => item.attachmentType == 7);
          this.attachmentType7 = type7[0].attachmentUrl.split(",");
          let type8 = res.rows.filter((item) => item.attachmentType == 8);
          this.attachmentType8 = type8[0].attachmentUrl.split(",");
          let type9 = res.rows.filter((item) => item.attachmentType == 9);
          this.attachmentType9 = type9[0].attachmentUrl.split(",");
          let type10 = res.rows.filter((item) => item.attachmentType == 10);
          this.attachmentType10 = type10[0].attachmentUrl.split(",");
          let type11 = res.rows.filter((item) => item.attachmentType == 11);
          this.attachmentType11 = type11[0].attachmentUrl.split(",");
          let type12 = res.rows.filter((item) => item.attachmentType == 12);
          this.attachmentType12 = type12[0].attachmentUrl.split(",");
          let type13 = res.rows.filter((item) => item.attachmentType == 13);
          this.attachmentType13 = type13[0].attachmentUrl.split(",");
          let type14 = res.rows.filter((item) => item.attachmentType == 14);
          this.attachmentType14 = type14[0].attachmentUrl.split(",");
        }
      });
    },
  },
};
</script>
<style scoped>
.zx_titel {
  /* padding: 15px; */
  /* font-size: 20px; */
  font-weight: bold;
  border-bottom: 1px solid #e0e2e6;
}
.upload_list {
  margin: 10px;
  border: 1px solid #e8e8ee;
}
.drawingsUploadLayout {
  padding: 20px;
  background-color: #fafafa;
  font-size: 14px;
  color: #646464;
  display: flex;
  justify-content: space-between;
}
.text_list {
  line-height: 30px;
  width: 200px;
}
.upload_text {
  font-size: 8px;
  margin-bottom: 10px;
  color: rgb(192, 192, 192);
}
.img_list_text {
  font-size: 14px;
  color: #666;
}
.but_warp {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}
.fill_row {
  padding: 0 20px;
}
</style>